<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Scalable background images</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="nav">
    <a class="icon icon-hamburger">hamburger</a>
    <div class="title">eCommerce</div>
    <a class="icon icon-shopcar">shop</a>
    <a class="icon icon-tags">tags</a>
</div>
<div class="banner">
    <img src="images/banner_bg.gif" alt=""/>
    <div class="desc">
        <p class="t1">New Collection</p>
        <p class="d1">Out Now!</p>
    </div>
    <a class="btn btn-pink" href="#">DISCOVER</a>
</div>
<div class="search-bar">
    <div class="icon icon-search">Search</div>
    <input type="text" placeholder="Search a item"/>
</div>
<div class="line"></div>
<div class="cate-title">Our popular products</div>
<div class="line"></div>

<ul class="product-list">
    <li>
        <img src="images/product-1.gif" alt=""/>
        <div class="desc">
            <p class="title">Pink Shirt</p>
            <p class="price">$ 249,00</p>
        </div>
    </li>
    <li>
        <img src="images/product-2.gif" alt=""/>
        <div class="desc">
            <p class="title">Pink Shirt</p>

            <p class="price">$ 249,00</p>
        </div>
    </li>
    <li>
        <img src="images/product-3.gif" alt=""/>
        <div class="desc">
            <p class="title">Pink Shirt</p>
            <p class="price">$ 249,00</p>
        </div>
    </li>
    <li>
        <img src="images/product-4.gif" alt=""/>
        <div class="desc">
            <p class="title">Pink Shirt</p>
            <p class="price">$ 249,00</p>
        </div>
    </li>
</ul>
<a id="view-all-items" href="javascript:;" class="btn btn-darkgrey">View all Items</a>
</body>
<script>
    document.write(document.documentElement.clientWidth + ";" + window.devicePixelRatio + ";" + window.innerWidth);
</script>
</html>